<template>
	<view>
		<view class='commission-details'>
			<view class='promoterHeader bg-color' v-if="!showTag">
				<view class='headerCon acea-row row-between-wrapper'>
					<view>
						<view class='name'>{{name}}</view>
						<view class='money' v-if="recordType == 4">￥<text class='num'>{{extractCount}}</text></view>
						<view class='money' v-else>￥<text class='num'>{{recordCount}}</text></view>
					</view>
					<view class='iconfont icon-jinbi1'></view>
				</view>
			</view>
			
			<view class='bg-color' v-if="showTag">
				<view class="view_box">
					<view class="view_box_item">
						<view class="text_1">上月</view>
						<view class="text_2">推荐佣金</view>
						<view class="text_3">{{info.last_month_spread_brokerage}}元</view>
					</view>
					<view class="view_box_item">
						<view class="text_1">今日</view>
						<view class="text_2">推荐佣金</view>
						<view class="text_3">{{info.today_spread_brokerage}}元</view>
					</view>
					<view class="view_box_item">
						<view class="text_1">本月</view>
						<view class="text_2">推荐佣金</view>
						<view class="text_3">{{info.month_spread_brokerage}}元</view>
					</view>
				</view>
				
				<view class="view_box">
					<view class="view_box_item">
						<view class="text_1">上月</view>
						<view class="text_2">拼团补贴</view>
						<view class="text_3">{{info.last_month_pink_brokerage}}元</view>
					</view>
					<view class="view_box_item">
						<view class="text_1">今日</view>
						<view class="text_2">拼团补贴</view>
						<view class="text_3">{{info.today_pink_brokerage}}元</view>
					</view>
					<view class="view_box_item">
						<view class="text_1">本月</view>
						<view class="text_2">拼团补贴</view>
						<view class="text_3">{{info.month_pink_brokerage}}元</view>
					</view>
				</view>
				
				
				<view class="view_box view_box_shadow">
					<view class="view_box_item">
						<view class="text_1">上月分红</view>
						<view class="text_4">{{info.last_month_everyday_bonus_brokerage}}元</view>
						<!-- <view class="text_5" style="color: #000000;">可分红</view> -->
					</view>
					<view class="view_box_item">
						<view class="text_1">本月分红</view>
						<view class="text_4">{{info.month_everyday_bonus_brokerage}}元</view>
						<!-- <view class="text_5" style="color: #3e65d8;">冻结中</view> -->
					</view>
					<view class="view_box_item">
						<view class="text_1">累计分红</view>
						<view class="text_4">{{info.total_everyday_bonus_brokerage}}元</view>
						<!-- <view class="text_5" style="color: #3e65d8;">已提现</view> -->
					</view>
				</view>
				
				<view class="view_view">{{info.tips}}</view>
			</view>
			
			<view class="tag" v-if="showTag">
				<view class="tag-item" @click="tagSwitch('')" :class="tagIndex==''?'tag-item-active-color':'tag-item-color'">全部</view>
				<view class="tag-item" @click="tagSwitch(3)" :class="tagIndex==3?'tag-item-active-color':'tag-item-color'">拼团补贴</view>
				<view class="tag-item" @click="tagSwitch(1)" :class="tagIndex==1?'tag-item-active-color':'tag-item-color'">分红佣金</view>
				<view class="tag-item" @click="tagSwitch(2)" :class="tagIndex==2?'tag-item-active-color':'tag-item-color'">推荐佣金</view>
			</view>
			
			<view class='sign-record'>
				<block v-for="(item,index) in recordList" :key="index" v-if="recordList.length>0">
					<view class='list'>
						<view class='item'>
							<view class='data'>{{item.time}}</view>
							<view class='listn'>
								<block v-for="(child,indexn) in item.list" :key="indexn">
									<view class='itemn acea-row row-between-wrapper'>
										<view>
											<view class='name line1'>{{child.title}}</view>
											<view>{{child.add_time}}</view>
										</view>
										<view class='num font-color' v-if="child.pm == 1">+{{child.number}}</view>
										<view class='num' v-else>-{{child.number}}</view>
									</view>
								</block>
							</view>
						</view>
					</view>
				</block>
				<view v-if="recordList.length == 0" style="margin-top: 80upx;">
					<u-empty text="数据为空" mode="list"></u-empty>
				</view>
			</view>
		</view>
		<!-- #ifdef MP -->
		<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
		<!-- #endif -->
		<home></home>
	</view>
</template>

<script>
	import {
		getCommissionInfo,
		spreadCount,
		getSpreadInfo
	} from '@/api/user.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import emptyPage from '@/components/emptyPage.vue'
	import home from '@/components/home';
	export default {
		components: {
			// #ifdef MP
			authorize,
			// #endif
			emptyPage,
			home
		},
		data() {
			return {
				name: '',
				type: 0,
				page: 0,
				limit: 10,
				recordList: [],
				recordType: 0,
				recordCount: 0,
				status: false,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false ,//是否隐藏授权
				extractCount:0,
				showTag: false,
				tagIndex: '',
				info: {}
			};
		},
		computed: mapGetters(['isLogin']),
		onLoad(options) {
			if (this.isLogin) {
				this.type = options.type;
			} else {
				toLogin();
			}
		},
		onShow: function() {
			let type = this.type;
			if (type == 1) {
				uni.setNavigationBarTitle({
					title: "提现记录"
				});
				this.name = '提现总额';
				this.recordType = 4;
				this.getRecordList();
				this.getRecordListCount();
			} else if (type == 2) {
				uni.setNavigationBarTitle({
					title: "佣金记录"
				});
				this.name = '佣金明细';
				this.recordType = 3;
				this.getRecordList();
				this.getRecordListCount();
				
				this.showTag = true;
			} else {
				uni.showToast({
					title: '参数错误',
					icon: 'none',
					duration: 1000,
					mask: true,
					success: function(res) {
						setTimeout(function() {
							// #ifndef H5
							uni.navigateBack({
								delta: 1,
							});
							// #endif
							// #ifdef H5
							history.back();
							// #endif

						}, 1200)
					},
				});
			}

		},
		methods: {
			tagSwitch(e){
				var that = this;
				that.tagIndex = e;
				that.page = 0;
				that.status = false;
				that.$set(that, 'recordList', []);
				that.getRecordList();
			},
			onLoadFun() {
				this.getRecordList();
				this.getRecordListCount();
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			getRecordList: function() {
				let that = this;
				let page = that.page;
				let limit = that.limit;
				let status = that.status;
				let recordType = that.recordType;
				let recordList = that.recordList;
				let recordListNew = [];
				if (status == true) return;
				getCommissionInfo({
					page: page,
					limit: limit,
					style: that.tagIndex
				}, recordType).then(res => {
					let len = res.data.length;
					let recordListData = res.data;
					recordListNew = recordList.concat(recordListData);
					that.status = limit > len;
					that.page = limit + page;
					that.$set(that, 'recordList', recordListNew);
				});
			},
			getRecordListCount: function() {
				let that = this;
				getSpreadInfo().then(res => {
					that.recordCount = res.data.commissionCount;
					that.extractCount = res.data.extractCount;
					that.info = res.data;
				});
			}
		},
		onReachBottom: function() {
			this.getRecordList();
		}
	}
</script>

<style scoped lang="scss">
	.view_box{
		display: flex;
		justify-content: space-between;
		margin: 0 40rpx;
		.view_box_item{
			width: 33.3%;
			text-align: center;
			color: #FFFFFF;
			padding: 20rpx 0;
			opacity: 0.95;
			.text_1{
				font-size: 24rpx;
				line-height: 40rpx;
			}
			.text_2{
				font-size: 24rpx;
				line-height: 40rpx;
			}
			.text_3{
				font-size: 30rpx;
				line-height: 50rpx;
			}
			.text_4{
				font-size: 32rpx;
				line-height: 40rpx;
			}
			.text_5{
				font-size: 20rpx;
				line-height: 20rpx;
			}
		}
	}
	.view_box_shadow{
		box-shadow: 0 0 6rpx #EEEEEE;
		border-radius: 80rpx;
		background-color: rgba(0,0,0,0.05);
	}
	.view_view{
		height: 60rpx;
		font-size: 20rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #f03625;
		margin-top: 40rpx;
		color: #FFFFFF;
		letter-spacing: 1rpx;
		box-shadow: 0 0 6rpx #999999;
	}
	
	
	.commission-details .promoterHeader .headerCon .money {
		font-size: 36rpx;
	}

	.commission-details .promoterHeader .headerCon .money .num {
		font-family: 'Guildford Pro';
	}
	.tag{
		width: 100%;
		display: flex;
		background: #FFFFFF;
		.tag-item{
			width: 25%;
			font-size: 28rpx;
			line-height: 90rpx;
			text-align: center;
		}
		.tag-item-color{
			color: #999999;
		}
		.tag-item-active-color{
			color: #e93323;
			position: relative;
		}
		.tag-item-active-color::after{
			content: "";
			width: 50rpx;
			height: 4rpx;
			background-color: #e93323;
			position: absolute;
			left: 50%;
			bottom: 0;
			margin-left: -25rpx;
		}
	}
</style>
